<template>
  <el-dialog v-model="dialogVisible" title="33" width="970px" @open="initData">
    <div v-loading="loading" class="cropper-content">
      <div class="cropper-box">
        <div class="cropper">
          <VueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :canScale="option.canScale"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :canMoveBox="option.canMoveBox"
            :canMove="option.canMove"
            :centerBox="option.centerBox"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :info="option.info"
            :fixedBox="option.fixedBox"
            :full="option.full"
            :mode="option.mode"
            @realTime="realTime"
            @imgLoad="imgLoad"
          />
        </div>
        <!-- 右侧工具类 -->
        <div class="cropper-tool">
          <div class="tool-item" @click="rotateLeft">
            <el-tooltip effect="dark" content="左旋转" placement="right">
              <el-button icon="el-icon-refresh-left"></el-button>
            </el-tooltip>
          </div>
          <div class="tool-item" @click="rotateRight">
            <el-tooltip effect="dark" content="右旋转" placement="right">
              <el-button icon="el-icon-refresh-right"></el-button>
            </el-tooltip>
          </div>
          <div class="tool-item" @click="changeScale(1)">
            <el-tooltip effect="dark" content="放大" placement="right">
              <el-button icon="el-icon-Plus"></el-button>
            </el-tooltip>
          </div>
          <div class="tool-item" @click="changeScale(-1)">
            <el-tooltip effect="dark" content="缩小" placement="right">
              <el-button icon="el-icon-Minus"></el-button>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!--预览效果图-->
      <div class="show-preview">
        <div>
          <h4>{{ "预览" }}</h4>
        </div>
        <div :style="previewStyle">
          <div class="preview" :style="getStyle">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </div>
        <div>
          <div style="margin-top: 58px">
            <span>{{ props.previewsSize }}</span
            >&nbsp;
            <span>{{ option.fixedNumber[0] }}:{{ option.fixedNumber[1] }}</span>
          </div>
          <div style="margin-top: 8px">
            <span>{{ "面积大小" }}{{ cropperSize.width }}*{{ cropperSize.height }}</span>
          </div>
          <div class="title">{{ "图片要求" }}</div>
          <div>
            <span>{{ "推荐尺寸" }} {{ props.recommendSize }}</span>
          </div>
          <div style="margin-top: 8px">
            <span>{{ "支持" }} {{ props.formatData }} {{ "图片提示" }}</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeClick">{{ "取消" }}</el-button>
        <el-button type="primary" @click="onSubmit">{{ "确定" }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import VueCropper from "vue-cropper/src/vue-cropper";
import { ref, toRefs, onMounted, defineEmits, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
// import { upLoadMaterialFun,previewVideoSms} from "@/api/model/videosms/videoSmsTemplate"
// import {
//     upLoadAimMaterialFun,
//     preview,
// } from '@/api/model/aim/aimTemplate';
const dialogVisible = ref(true);
const props = defineProps({
  fixedNumber: {
    type: Array,
    default: [1, 1],
  },
  previewsSize: {
    type: String,
    default: "162*162",
  },
  recommendSize: {
    type: String,
    default: "540*540",
  },
  formatData: {
    type: String,
    default: "JPG，JPEG，PNG",
  },
  imageSrc: {
    type: String,
    default: "",
  },
  productId: {
    type: String,
    default: "",
  },
  materialtype: {
    type: String,
    default: "img",
  },
  templateType: {
    type: String,
    default: "5G",
  },
  clipFileName: {
    type: String,
    default: "test.png",
  },
});
const cropper = ref();
const loading = ref(true);
const previews = ref({
  img: "",
  url: "",
});
const getStyle = ref({
  with: "",
  height: "",
  zoom: 1,
  top: 18,
});
// 裁剪后确认的素材
const selectedMaterial = ref([]);
// 裁剪后的数据
const materialClipData = ref({
  id: "",
  imageSrc: "",
  productId: "",
  materialName: "",
  materialSize: "",
});
const { previewsSize } = toRefs(props);
console.log("props", props);
// 预览框的默认大小
const previewStyle = ref({
  width: previewsSize.value.split("*")[0] + "px",
  height: previewsSize.value.split("*")[1] + "px",
});

const cropperSize = ref({
  width: "",
  height: "",
});

const emit = defineEmits(["selectedMaterial", "closeDialog"]);

const option = ref({
  // 裁剪图片的地址
  img: props.imageSrc,
  // 裁剪生成图片的质量(可选0.1 - 1)
  outputSize: 1,
  // 裁剪生成图片的格式（jpeg || png || webp）
  outputType: props.clipFileName.split(".")[1],
  // 图片大小信息
  info: true,
  canScale: true, // 图片是否允许滚轮缩放
  autoCrop: true, // 是否默认生成截图框
  // 默认生成截图框宽度
  // autoCropWidth: 230,
  // 默认生成截图框高度
  // autoCropHeight: 150,
  fixed: true, // 是否开启截图框宽高固定比例
  // 截图框的宽高比例
  fixedNumber: props.fixedNumber,
  full: false, // false按原比例裁切图片，不失真
  fixedBox: false, // 固定截图框大小，不允许改变
  canMove: false, // 上传图片是否可以移动
  canMoveBox: true, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  height: true, // 是否按照设备的dpr 输出等比例图片
  infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
  // 限制图片最大宽度和高度
  // maxImgSize: 3000,
  // 图片根据截图框输出比例倍数
  mode: "contain", // 图片默认渲染方式 contain , cover, 100px, 100% auto
});

onMounted(() => {});

//初始化
const initData = () => {
  option.value.img = props.imageSrc;
  option.value.fixedNumber = props.fixedNumber;
};

// 初始化函数
const imgLoad = () => {
  loading.value = false;
};
// 向左旋转
const rotateLeft = () => {
  cropper.value.rotateLeft();
};
// 向右旋转
const rotateRight = () => {
  cropper.value.rotateRight();
};
// 图片缩放
const changeScale = (num) => {
  num = num || 1;
  cropper.value.changeScale(num);
};
// 设置实时预览
const realTime = (data) => {
  if (data.w > 162) {
    getStyle.value.zoom = 162 / data.w;
  } else {
    getStyle.value.zoom = 1;
  }
  getStyle.value.height = data.h + "px";
  getStyle.value.width = data.w + "px";
  cropperSize.value.width = Math.ceil(data.w);
  cropperSize.value.height = Math.ceil(data.h);
  previews.value.url = data.url;
  previews.value.img = data.img;
};

// 确定提交
const onSubmit = () => {
  cropper.value.getCropBlob((data) => {
    console.log("data", data);
    const formData = new FormData();
    //  let suffixName = ;
    // formData.append('file', data, 'Test.' + props.clipFileName.split(".")[1]);
    // formData.append('productId', props.productId)
    if (props.templateType === "5G") {
      // upLoadMaterialFun(formData).then(res => {
      //     if (res.code === 200) {
      //         ElMessage({
      //             message: $T.value("video.make.materialSuccess"),
      //             type: 'success',
      //         })
      //     }
      //     materialClipData.value.materialName = res.data.materialName;
      //     materialClipData.value.materialSize = res.data.materialSize;
      //     materialClipData.value.id = res.data.id;
      //     previewVideoSms({ materialId: materialClipData.value.id }).then(result => {
      //         materialClipData.value.imageSrc = window.URL.createObjectURL(result);
      //         selectedMaterial.value.push(materialClipData.value);
      //         emit("selectedMaterial", selectedMaterial)
      //         emit("closeDialog");
      //     })
      // })
    } else {
      let type = 1;
      if (props.materialtype === "img_cover") {
        type = 3;
      }
      formData.append("type", type);
      // upLoadAimMaterialFun(formData).then(res => {
      //     if (res.code === 200) {
      //         ElMessage({
      //             message: $T.value("video.make.materialSuccess"),
      //             type: 'success',
      //         })
      //     }
      //     materialClipData.value.materialName = res.data.materialName;
      //     materialClipData.value.materialSize = res.data.materialSize;
      //     materialClipData.value.id = res.data.id;
      //     preview({ materialId: materialClipData.value.id }).then(result => {
      //         materialClipData.value.imageSrc = window.URL.createObjectURL(result);
      //         selectedMaterial.value.push(materialClipData.value);
      //         emit("selectedMaterial", selectedMaterial)
      //         emit("closeDialog");
      //     })
      // })
    }
  });
};
// 取消
const closeClick = () => {
  emit("closeDialog");
};
</script>

<style lang="scss" scoped>
.cropper-content {
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .cropper-box {
    flex: 1;
    width: 624px;
    display: flex;
    .cropper {
      width: 600px;
      height: 425px;
      background-color: #ebeef5;

      // 工具栏
      .cropper-tool {
        .tool-item {
        }
      }
    }
  }

  .show-preview {
    flex: 1;
    padding-left: 18px;
    .preview {
      width: 162px;
      height: 162px;
      border: 1px solid #67c23a;
      background: #cccccc;
      overflow: hidden;
      margin-top: 18px;
      .previewsImag {
        width: 162px;
        object-fit: cover;
      }
    }
  }
}

.title {
  width: 64px;
  height: 24px;
  font-size: 16px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 24px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #000000;
  margin-top: 18px;
}
</style>
